
.loader {
    text-indent: -9999em;
    position: relative;
    width: 100px;
    height: 100px;
    background: #4ea980;

    /*从左向右0~10%位置纯白，10%~50%纯白~透明*/
    background: linear-gradient(to right, #4ea980 10%, rgba(255, 255, 255, 0)  50%);
    border-radius: 50%;
    box-shadow:inset 0 0 0 20px rgba(255,255,255,.2);
    -webkit-animation: load-effect 2s infinite linear;
    animation: load-effect 2s infinite linear;
}

/*绘制纯白1/4圆*/

.loader::before {
    position: absolute;
    content: '';
    width: 50%;
    height: 50%;
    background: #FFF;
    border-radius: 100% 0 0 0;
    left:0;
    top:0;
}

/*绘制绿色背景内圆，挡住白色*/
.loader::after  {
    background: #ffffff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
}

@keyframes load-effect {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}